<template>
  <div style="margin-top: 50px">
    <div class="top">
      <div style="text-align: center">
        <div class="icon_div"><img src="@/assets/image/right.png"></div>
        <div class="icon_div">
          <div class="xian1" />
        </div>
        <div class="icon_div"><img src="@/assets/image/2_blue.png"></div>
        <div class="icon_div">
          <div class="xian2" />
        </div>
        <div class="icon_div"><img src="@/assets/image/3_grey.png"></div>
        <div class="icon_div">
          <div class="xian3" />
        </div>
        <div class="icon_div"><img src="@/assets/image/4_grey.png"></div>
      </div>
      <div style="text-align: center">
        <div class="icon_div" style="width: 195px">
          <span style="color: gray">填写账号及验证</span>
        </div>
        <div class="icon_div" style="width: 192px"><span>二次验证</span></div>
        <div class="icon_div" style="width: 191px">
          <span style="color: gray">设置新密码</span>
        </div>
        <div class="icon_div" style="width: 195px">
          <span style="color: gray">完成</span>
        </div>
      </div>
    </div>
    <div class="container">
      <div style="background-color: #ecf1f8; width: 487px; margin-left: 52px">
        <span style="
            color: rgb(98 101 105);
            width: 580px;
            height: 30px;
            line-height: 2;
          ">请选择您部门同事，通过其手机获取二次验证码,填写确认进入下一步</span>
      </div>
      <el-form ref="ruleForm" class="demo-ruleForm">
        <el-form-item label="选择同事:">
          <div class="depart_div">
            <el-radio-group v-model="radio" style="margin-left: 10px; margin-top: 5px">
              <el-radio v-for="personitem in dataList" :key="personitem.ObjectID" :label="personitem"
                style="width: 170px">{{ personitem.showname }}</el-radio>
            </el-radio-group>
          </div>
        </el-form-item>

        <el-form-item label="验证码:" style="margin-left: 13px">
          <el-input v-model="Verificationcode" class="input_text" style="width: 168px" />
          <el-button v-show="show" type="primary" style="margin-left: 20px" @click="GetAutoCode">获取验证码</el-button>
          <el-button v-show="!show" disabled type="info" style="margin-left: 20px; width: 112px" @click="GetAutoCode">
            {{ count }} s</el-button>
        </el-form-item>
      </el-form>
      <div class="btn_div">
        <el-button type="primary" style="width: 300px" @click="Next">下一步</el-button>
      </div>
    </div>
    <div>
      <hr style="width: 700px">
    </div>
    <div style="text-align: center">
      <span style="color: rgb(98 101 105)">为避免手机遗失导致重要信息泄露，密码重置功能需要您本人和部门同事双重短信验证，敬请知悉。</span>
    </div>
  </div>
</template>

<script>
  import Global from '@/utils/Global.js'
  export default {
    data() {
      return {
        userName: '',
        Phone: '',
        usercode: '',
        code: '',
        parentID: '',
        radio: '',
        Verificationcode: '',
        dataList: [],
        userid: '',
        show: true,
        count: '',
        timer: null
      }
    },
    created() {
    },
    methods: {
      // 获取验证码
      GetAutoCode(form) {
        const _that = this
        const TIME_COUNT = 60
        if (!_that.timer) {
          _that.count = TIME_COUNT
          _that.show = false
          _that.timer = setInterval(() => {
            if (_that.count > 0 && _that.count <= TIME_COUNT) {
              _that.count--
            } else {
              _that.show = true
              clearInterval(_that.timer)
              _that.timer = null
            }
          }, 1000)
        }
      },
      Next() {
        const _that = this
        if (_that.Verificationcode == '') {
          _that.$message.error('请输入验证码！')
          return
        }
        _that.$router.push({
          path: '/updatepwd'
        })
      }
    }
  }

</script>
<style scoped>
  .top {
    width: 100%;
    height: 70px;
  }

  .container {
    margin: 0 auto;
    width: 600px;
    height: 330px;
  }

  .demo-ruleForm {
    margin-left: 110px;
    margin-top: 20px;
  }

  .input_text {
    width: 300px;
  }

  .btn_div {
    text-align: center;
  }

  /deep/ label {
    font-weight: 500;
  }

  .icon_div {
    display: inline-block;
  }

  .xian1 {
    width: 160px;
    border: 1px solid #2f86f6;
    background-color: #2f86f6;
    margin-bottom: 15px;
  }

  .xian2 {
    width: 160px;
    border: 1px solid #dadada;
    background-color: #dadada;
    margin-bottom: 15px;
  }

  .xian3 {
    width: 160px;
    border: 1px solid #dadada;
    background-color: #dadada;
    margin-bottom: 15px;
  }

  .depart_div {
    border: 1px solid gainsboro;
    width: 300px;
    height: 150px;
    margin-left: 70px;
    overflow: auto;
  }

  .depart_div /deep/ [data-v-4274cc8c] label {
    height: 25px;
  }

</style>
